<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>逾期提醒</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ngx-table
    [configuration]="tableConfig.config"
    [data]="rows"
    [columns]="columns"
    [detailsTemplate]="detailTpl"
  >
  </ngx-table>
</ion-content>

<ng-template #detailTpl let-row>
  <ion-item>
    <ion-label color="primary">商户姓名</ion-label>
    <ion-label slot="end">{{ row.name }}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">所在城市</ion-label>
    <ion-label slot="end">{{ row.city }}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">联系电话</ion-label>
    <ion-label slot="end">{{ row.phone }}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">所在地址</ion-label>
    <ion-label slot="end">{{ row.address }}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">逾期金额</ion-label>
    <ion-label slot="end">{{ row.amount }}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">逾期天数</ion-label>
    <ion-label slot="end">{{ row.date }}</ion-label>
  </ion-item>
  <div class="ion-text-center ion-padding">
    <a>查看更多</a>
  </div>
</ng-template>
